<template>
	<view class="wrap">
		<view class="box bw">
			<view class="box-header app_flex-aicjcsb">
				<view class="box-header_L">销售流水</view>
				<view class="box-header_R app_arrow" @click="onSkipTap('salesWater')">查看详情</view>
			</view>
			<view class="box-main">
				<view class="box-main_top app_flex">
					<view class="diagram">
						<!-- <image src="../../static/images/data-1.png"></image> -->
						<qiun-data-charts type="ring" :opts="c1opts" :chartData="c1data" />
					</view>
					<view class="data">
						<view class="data-item">
							<view class="data-item_label">总销售额(元)</view>
							<view class="data-item_content fbold">{{salesSum}}</view>
						</view>
						<view class="data-item">
							<view class="data-item_label dot-blue">线上销售 {{onlineProportion}}%</view>
							<view class="data-item_content">{{onlineSalesSum}}</view>
						</view>
						<view class="data-item">
							<view class="data-item_label dot-red">线下销售 {{offlineProportion}}%</view>
							<view class="data-item_content">{{offlineSalesSum}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box bw">
			<view class="box-header app_flex-aicjcsb">
				<view class="box-header_L">产品销售总览</view>
				<view class="box-header_R app_arrow" @click="onSkipTap('productSaleOverview')">查看详情</view>
			</view>
			<view class="box-main">
				<view class="box-main_top app_flex">
					<view class="diagram">
						<!-- <image src="../../static/images/data-2.png"></image> -->
						<qiun-data-charts type="ring" :opts="c2opts" :chartData="c2data" />
					</view>
					<view class="data">
						<view class="data2-item fbold">
							<text>总销售量</text>
							<text>{{productSalesInfo.total || '-'}}</text>
						</view>
						<view class="data2-item" v-for="(item, index) in productSalesInfo.details" :key="index">
							<text>{{item.strip}}</text>
							<text>{{item.amount || '--'}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box bw">
			<view class="box-header app_flex-aicjcsb">
				<view class="box-header_L">进销存数据</view>
				<view class="box-header_R app_arrow" @click="onSkipTap('purchaseSalesInventory')">查看详情</view>
			</view>
			<view class="box-main">
				<view class="box-main_top app_flex">
					<view class="diagram">
						<!-- <image src="../../static/images/data-1.png"></image> -->
						<qiun-data-charts type="ring" :opts="c3opts" :chartData="c3data" />
					</view>
					<view class="data">
						<view class="data2-item fbold">
							<text>入库总数</text>
							<text>{{warehouseInfo.total}}</text>
						</view>
						<view class="data2-item" v-for="(item, index) in warehouseInfo.details" :key="index">
							<text>{{item.strip}}</text>
							<text>{{item.amount?item.amount:'--'}}</text>
						</view>
					</view>
				</view>
				<view class="box-main_bottom app_flex">
					<view class="data" style="margin-left: 0;">
						<view class="data2-item dot-red">
							<text>出库 {{warehouseInfo.outProportion}}%</text>
							<text>{{warehouseInfo.outTotal}}</text>
						</view>
						<view class="data2-item" v-for="(item, index) in warehouseInfo.outDetails" :key="index">
							<text>{{item.strip}}</text>
							<text>{{item.amount?item.amount:'--'}}</text>
						</view>
					</view>
					<view class="data">
						<view class="data2-item dot-blue">
							<text>库存 {{warehouseInfo.inProportion}}%</text>
							<text>{{warehouseInfo.inTotal}}</text>
						</view>
						<view class="data2-item" v-for="(item, index) in warehouseInfo.inDetails" :key="index">
							<text>{{item.strip}}</text>
							<text>{{item.amount?item.amount:'--'}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box bw">
			<view class="box-header app_flex-aicjcsb">
				<view class="box-header_L">销售金额数据</view>
				<view class="box-header_R app_arrow" @click="onSkipTap('salesAmount')">查看详情</view>
			</view>
			<view class="box-main">
				<view class="box-main_top app_flex">
					<view class="diagram">
						<!-- <image src="../../static/images/data-1.png"></image> -->
						<qiun-data-charts type="ring" :opts="c4opts" :chartData="c4data" />
					</view>
					<view class="data">
						<view class="data-item">
							<view class="data-item_label">总销售金额(元)</view>
							<view class="data-item_content fbold">{{salesSum}}</view>
						</view>
						<view class="data-item">
							<view class="data-item_label dot-blue">实际销售金额 100%</view>
							<view class="data-item_content">{{salesSum}}</view>
						</view>
						<view class="data-item">
							<view class="data-item_label dot-red">退货金额 0%</view>
							<view class="data-item_content">0</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api'
	let timer = null
	const copts = {
		timing: "easeOut",
		duration: 1000,
		rotate: false,
		rotateLock: false,
		color: ["#4C88FF", "#FF6666", "#FAC858", "#91CB74", "#73C0DE", "#3CA272", "#9A60B4",
			"#ea7ccc", "#ea7ccc"
		],
		padding: [0, 0, 0, 0],
		fontSize: 13,
		fontColor: "#666666",
		dataLabel: false,
		dataPointShape: false,
		dataPointShapeType: "solid",
		touchMoveLimit: 60,
		enableScroll: false,
		enableMarkLine: false,
		legend: {
			show: false
		},
		title: {
			name: ""
		},
		subtitle: {
			name: ""
		},
		extra: {
			ring: {
				ringWidth: 20,
				border: false
			},
			tooltip: {
				fontSize: 6
			}
		}
	}
	const c1opts = {
		...copts
	}
	const c2opts = {
		...copts
	}
	const c3opts = {
		...copts
	}
	const c4opts = {
		...copts
	}
	export default {
		data() {
			return {
				offlineProportion: 0,
				offlineSalesSum: 0,
				onlineProportion: 0,
				onlineSalesSum: 0,
				salesSum: 0,
				productSalesInfo: {
					categoryTotals: null,
					details: null,
					productList: null,
					proportionData: null,
					total: null
				},
				warehouseInfo: {},
				c1data: {},
				c2data: {},
				c3data: {},
				c4data: {},
				c1opts,
				c2opts,
				c3opts,
				c4opts,
			}
		},
		onLoad(options) {
			this.updatePage()
		},
		onPullDownRefresh() {
			this.updatePage()
		},
		onReady() {},
		methods: {
			updatePage() {
				clearTimeout(timer)
				timer = setTimeout(() => {
					uni.showLoading({
						title: '加载中'
					})
				}, 2000)
				Promise.all([this.getSalesDataSaleroom(),
					this.getSalesDataProduct(),
					this.getSalesDataWarehouse()
				]).then(() => {
					clearTimeout(timer)
					uni.hideLoading()
				})
			},
			onSkipTap(type, index) {
				let urlObj = {
					salesWater: '/pages/analysis/salesWater',
					productSaleOverview: '/pages/analysis/productSaleOverview',
					purchaseSalesInventory: '/pages/analysis/purchaseSalesInventory',
					salesAmount: '/pages/analysis/salesAmount'
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			getSalesDataSaleroom() {
				return new Promise((resolve, reject) => {
					this.$g_api.salesDataSaleroom().then(({
						data
					}) => {
						this.offlineProportion = data.offlineProportion || 0
						this.offlineSalesSum = data.offlineSalesSum || 0
						this.onlineProportion = data.onlineProportion || 0
						this.onlineSalesSum = data.onlineSalesSum || 0
						this.salesSum = data.salesSum || 0
						this.c1data = JSON.parse(JSON.stringify({
							series: [{
								data: [{
									"name": "线上销售",
									"value": data.onlineSalesSum || 0
								}, {
									"name": "线下销售",
									"value": data.offlineSalesSum || 0
								}]
							}]
						}))
						this.c4data = JSON.parse(JSON.stringify({
							series: [{
								data: [{
									"name": "实际销售金额",
									"value": data.salesSum || 0
								}, {
									"name": "退货金额",
									"value": 0
								}]
							}]
						}))
					}).finally(() => {
						resolve()
					})
				})
			},
			getSalesDataProduct() {
				return new Promise((resolve, reject) => {
					this.$g_api.salesDataProduct().then(({
						data
					}) => {
						if (data && data.proportionData && data.proportionData.length > 0) {
							let seriesData = []
							data.proportionData.forEach(item => {
								seriesData.push({
									name: item.typeTitle,
									value: Number(item.horse)
								})
							})
							this.c2data = JSON.parse(JSON.stringify({
								series: [{
									data: seriesData
								}]
							}))
						} else {
							this.c2data = JSON.parse(JSON.stringify({
								series: [{
									data: []
								}]
							}))
						}
						this.productSalesInfo = data
					}).finally(() => {
						resolve()
					})
				})
			},
			getSalesDataWarehouse() {
				return new Promise((resolve, reject) => {
					this.$g_api.salesDataWarehouse().then(({
						data
					}) => {
						this.c3data = JSON.parse(JSON.stringify({
							series: [{
								data: [{
									"name": "库存",
									"value": data.inProportion || 0
								}, {
									"name": "出库",
									"value": data.outProportion || 0
								}]
							}]
						}))
						this.warehouseInfo = data
					}).finally(() => {
						resolve()
					})
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding-bottom: 40rpx;
	}

	.box {
		width: 710rpx;
		margin: 20rpx auto 0;
		border-radius: 10rpx;
	}

	.box-header {
		height: 100rpx;
		padding: 0 30rpx;
	}

	.box-header_L {
		position: relative;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		z-index: 99;

		&::before {
			position: absolute;
			left: 0;
			bottom: -2rpx;
			content: '';
			width: 40rpx;
			height: 16rpx;
			background-color: rgba(178, 204, 255, 1);
			z-index: -1;
		}
	}

	.box-header_R {
		font-size: 24rpx;
		color: #999;
	}

	.box-main {
		padding: 30rpx 30rpx 40rpx 50rpx;
	}

	.box-main_top {}

	.box-main_bottom {
		margin-top: 40rpx;
	}

	.diagram {
		width: 240rpx;
		flex-shrink: 0;
		height: 240rpx;

		image {
			width: 240rpx;
			height: 240rpx;
		}
	}

	.data {
		margin-left: 90rpx;
	}

	.dot-blue {
		position: relative;

		&::before {
			position: absolute;
			left: -26rpx;
			top: 50%;
			content: '';
			width: 16rpx;
			height: 16rpx;
			transform: translateY(-50%);
			border-radius: 50%;
			background-color: #4C88FF;
		}
	}

	.dot-red {
		position: relative;

		&::before {
			position: absolute;
			left: -26rpx;
			top: 50%;
			content: '';
			width: 16rpx;
			height: 16rpx;
			transform: translateY(-50%);
			border-radius: 50%;
			background-color: #FF6666;
		}
	}

	.data-item {
		margin-bottom: 30rpx;
	}

	.data-item_label {
		margin-bottom: 4rpx;
		font-size: 22rpx;
		color: #999;
	}

	.data-item_content {
		// font-weight: bold;
		font-size: 24rpx;
		color: #333;
	}

	.data2-item {
		margin-bottom: 14rpx;
		font-size: 24rpx;
		color: #888;

		&:nth-child(1) {
			color: #333;
		}

		text {
			margin-right: 16rpx;
		}
	}
</style>
